import React from 'react';
import { ENUM, PROJECT_WRITE_ROLES } from 'utils/constants.js';
import { Balloon, Dropdown, Menu } from '@teamix/ui';
import { ButtonIcon } from '@alife/devops-ui';
import UploadFile from '../content/dialog/uploadFile';
import track from 'utils/track';
import { access, protectBranchCheck } from 'components/accessContainer/util';
import './index.scss';
import utils from 'utils';

// 新建和上传文件按钮改成下拉
import intl from '../../../../../../../../locale';

export default class NewAndUploadFile extends React.Component {
  state = {
    isDialogVisible: false,
  };

  onDialogOpen = () => {
    this.setState({
      isDialogVisible: true,
    });
  };

  onDialogClose = () => {
    this.setState({
      isDialogVisible: false,
    });
  };

  renderBtns = () => {
    const { pathResource, resourceSubject } = window.FORCE;
    const { protectedBranch, goNew, lastMirrorSyncRecord, extraMenu } = this.props;
    const { role } = pathResource;
    const { access_level } = ENUM;
    const allowProtectPush = protectBranchCheck(protectedBranch, role);
    const isDeveloper = role === access_level[30];
    const { revisionType } = resourceSubject;
    const isTagRevision = revisionType === 'tag' || revisionType === 'sha1';
    const hasAccess = access(PROJECT_WRITE_ROLES, role) && allowProtectPush;
    const menuItems = [];
    if (extraMenu) {
      menuItems.push(extraMenu.map((item) => <Menu.Item>{item}</Menu.Item>));
    }
    let isMirrorSynchronizing = false;
    if (lastMirrorSyncRecord) {
      isMirrorSynchronizing = utils.isMirrorSynchronizing(lastMirrorSyncRecord.sync_status);
    }

    if (isMirrorSynchronizing) {
      menuItems.push(
        <Menu.Item disabled>
          <Balloon.Tooltip
            trigger={
              <div>
                {intl.get({
                  id: 'code-assets.containers.repoOverviewInfo.newAndUploadFile.CreateAFile',
                  defaultMessage: '新建文件',
                })}
              </div>
            }
          >
            {intl.get({
              id: 'code-assets.containers.repoOverviewInfo.newAndUploadFile.TheRepositoryIsBeingSynchronized',
              defaultMessage: '仓库同步中，暂不支持操作，请稍后再试',
            })}
          </Balloon.Tooltip>
        </Menu.Item>,
      );

      menuItems.push(
        <Menu.Item disabled>
          <Balloon.Tooltip
            align="t"
            trigger={
              <div>
                {intl.get({
                  id: 'code-assets.containers.repoOverviewInfo.newAndUploadFile.UploadObjects',
                  defaultMessage: '上传文件',
                })}
              </div>
            }
          >
            {intl.get({
              id: 'code-assets.containers.repoOverviewInfo.newAndUploadFile.TheRepositoryIsBeingSynchronized',
              defaultMessage: '仓库同步中，暂不支持操作，请稍后再试',
            })}
          </Balloon.Tooltip>
        </Menu.Item>,
      );
    } else if (hasAccess) {
      if (isTagRevision) {
        menuItems.push(
          <Menu.Item disabled>
            <Balloon.Tooltip
              align="l"
              trigger={
                <div>
                  {intl.get({
                    id: 'code-assets.containers.repoOverviewInfo.newAndUploadFile.CreateAFile',
                    defaultMessage: '新建文件',
                  })}
                </div>
              }
            >
              {/* {intl.get({
                id:
                  'code-assets.containers.repoOverviewInfo.newAndUploadFile.YouCanOnlyCreateFiles',
                defaultMessage: '只有分支下才可以新建文件',
              })} */}
              不支持在标签视图下操作，请切换分支视图再试
            </Balloon.Tooltip>
          </Menu.Item>,
        );

        menuItems.push(
          <Menu.Item disabled>
            <Balloon.Tooltip
              align="l"
              trigger={
                <div>
                  {intl.get({
                    id: 'code-assets.containers.repoOverviewInfo.newAndUploadFile.UploadObjects',
                    defaultMessage: '上传文件',
                  })}
                </div>
              }
            >
              {/* {intl.get({
                id:
                  'code-assets.containers.repoOverviewInfo.newAndUploadFile.FilesCanOnlyBeUploaded',
                defaultMessage: '只有分支下才可以上传文件',
              })} */}
              不支持在标签视图下操作，请切换分支视图再试
            </Balloon.Tooltip>
          </Menu.Item>,
        );
      } else {
        menuItems.push(
          <Menu.Item
            onClick={() => {
              track({
                action: 'new_file',
                page: 'Repo-Files',
                control: 'viewsrc - newfile',
              });

              goNew && goNew();
            }}
          >
            <div>
              {intl.get({
                id: 'code-assets.containers.repoOverviewInfo.newAndUploadFile.CreateAFile',
                defaultMessage: '新建文件',
              })}
            </div>
          </Menu.Item>,
        );

        menuItems.push(
          <Menu.Item
            onClick={() => {
              track({
                action: 'upload_file',
                page: 'Repo-Files',
                control: 'viewsrc - uploadfile',
              });

              this.onDialogOpen();
            }}
          >
            <div>
              {intl.get({
                id: 'code-assets.containers.repoOverviewInfo.newAndUploadFile.UploadObjects',
                defaultMessage: '上传文件',
              })}
            </div>
          </Menu.Item>,
        );
      }
    } else {
      menuItems.push(
        <Menu.Item disabled>
          <Balloon.Tooltip
            trigger={
              <div>
                {intl.get({
                  id: 'code-assets.containers.repoOverviewInfo.newAndUploadFile.CreateAFile',
                  defaultMessage: '新建文件',
                })}
              </div>
            }
            align="l"
            text={
              isTagRevision ? (
                intl.get({
                  id: 'code-assets.containers.repoOverviewInfo.newAndUploadFile.YouCanOnlyCreateFiles',
                  defaultMessage: '只有分支下才可以新建文件',
                })
              ) : (
                <React.Fragment>
                  {!access(PROJECT_WRITE_ROLES, role) ? (
                    intl.get({
                      id: 'code-assets.containers.repoOverviewInfo.newAndUploadFile.YouAreNotAuthorizedTo',
                      defaultMessage: '无权限进行新建文件操作，请联系管理员申请对应的权限',
                    })
                  ) : (
                    <React.Fragment>
                      {isDeveloper
                        ? intl.get({
                            id: 'code-assets.containers.repoOverviewInfo.newAndUploadFile.TheCurrentBranchIsProtected',
                            defaultMessage: '当前为保护分支，无权限直接推送，请联系管理员处理',
                          })
                        : intl.get({
                            id: 'code-assets.containers.repoOverviewInfo.newAndUploadFile.CurrentlyItIsAProtected',
                            defaultMessage: '当前为保护分支，无权限直接推送，可前往设置处理',
                          })}
                    </React.Fragment>
                  )}
                </React.Fragment>
              )
            }
          />
        </Menu.Item>,
      );

      menuItems.push(
        <Menu.Item disabled>
          <Balloon.Tooltip
            trigger={
              <div>
                {intl.get({
                  id: 'code-assets.containers.repoOverviewInfo.newAndUploadFile.UploadObjects',
                  defaultMessage: '上传文件',
                })}
              </div>
            }
            align="l"
            text={
              isTagRevision ? (
                intl.get({
                  id: 'code-assets.containers.repoOverviewInfo.newAndUploadFile.FilesCanOnlyBeUploaded',
                  defaultMessage: '只有分支下才可以上传文件',
                })
              ) : (
                <React.Fragment>
                  {!access(PROJECT_WRITE_ROLES, role) ? (
                    intl.get({
                      id: 'code-assets.containers.repoOverviewInfo.newAndUploadFile.YouAreNotAuthorizedTo.1',
                      defaultMessage: '无权限进行上传文件操作，请联系管理员申请对应的权限',
                    })
                  ) : (
                    <React.Fragment>
                      {isDeveloper
                        ? intl.get({
                            id: 'code-assets.containers.repoOverviewInfo.newAndUploadFile.TheCurrentBranchIsProtected',
                            defaultMessage: '当前为保护分支，无权限直接推送，请联系管理员处理',
                          })
                        : intl.get({
                            id: 'code-assets.containers.repoOverviewInfo.newAndUploadFile.CurrentlyItIsAProtected',
                            defaultMessage: '当前为保护分支，无权限直接推送，可前往设置处理',
                          })}
                    </React.Fragment>
                  )}
                </React.Fragment>
              )
            }
          />
        </Menu.Item>,
      );
    }
    return (
      <Dropdown
        trigger={<ButtonIcon name="more-line" size="medium" style={{ marginLeft: 4 }} />}
        safeNode={() => document.querySelector('#new-edit-btn')}
        triggerType="click"
        align="tr br"
      >
        <Menu>{menuItems}</Menu>
      </Dropdown>
    );
  };

  render() {
    const { pathResource } = window.FORCE;
    const { isArchive } = pathResource;
    if (isArchive !== 'false') {
      return null;
    }
    return (
      <React.Fragment>
        {this.renderBtns()}
        {this.state.isDialogVisible ? (
          <UploadFile
            {...this.props}
            closeModal={this.onDialogClose}
            isDialogVisible={this.state.isDialogVisible}
          />
        ) : null}
      </React.Fragment>
    );
  }
}
